<template>
  <div class="parameterSetting b f22" @click="inputDropDown = false">
    <div class="wp">
      <el-row>
        <el-col :span="24">
          <h5 class="">软件选择</h5>
        </el-col>
      </el-row>
      <el-form :inline="true" :model="form" class="demo-form-inline mt12">
        <el-row>
          <el-col :span="9">
            <el-form-item label="仿真软件" :label-width="90">
              <el-select v-model="form.simulator" placeholder="" class="w100" @change="getAppModules">
                <el-option value="1" label="fastcae" />
                <!-- <el-option  value="5" label="openfoam" /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" class="ml40">
            <el-form-item label="仿真模块" :label-width="90">
              <el-select v-model="form.simulateModule" placeholder="Heat Transfer" class="w100">
                <el-option :key="index" v-for="(item, index) in modules" :value="item.id" :label="item.name" />
                <el-option  value="14" label="HeatTransfer(O)" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <el-row class="mt10">
        <el-col :span="24">
          <h5 class=""><span class="ib mr27">分组设置</span> <span class="ib pt">
              <!-- <plusBtn /> -->
            </span></h5>
        </el-col>
      </el-row>
      <el-row class="mt20 ">
        <el-col :span="7">
          <el-form-item label="" class="w91">
            <el-select v-model="crtGroupId" @change="handleCrtGroupIdChange" placeholder="分组" class="w100">
              <template :key="index" v-for="(item, index) in groupData">
                <el-option :label="item.groupName" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mt45">
        <el-col :span="24">
          <h5 class=""><span class="ib mr27">参数设置</span><span class="ib pt" @click="hangdleAddParam">
              <plusBtn />
            </span> </h5>
        </el-col>
      </el-row>
      <el-row class="mt29">
        <el-col :span="24">
          <div class="r" style="overflow:auto;">
            <ul class="fx f12 lst">
              <li class=" h40 ifc ac bb pl12" style="width: 5%;min-width: 70px;">排序</li>
              <li class=" h40 ifc ac bb pl12" style="width: 18%;">参数名</li>
              <li class=" h40 ifc ac bb pl12" style="width: 14%;">参数key值</li>
              <li class=" h40 ifc ac bb pl12" style="width: 10%;">参数结构</li>
              <li class=" h40 ifc ac bb pl12" style="width: 10%;">参数类型</li>
              <li class=" h40 ifc ac bb pl12" style="width: 8%;min-width: 82px;">能否为0</li>
              <li class=" h40 ifc ac bb pl12" style="width: 10%;">参数最大长度</li>

              <li class=" h40 ifc ac bb pl12" style="width: 10%;">参数默认值</li>
              <li class=" h40 ifc ac bb pl12 " style="width: 14%;">操作</li>
            </ul>
            <template v-if="crtGroupParams.length == 0 && newGroupParams.length == 0">
              <div class="tc"><span class="f12 c9" style="color: #999;">暂无数据</span></div>
            </template>
            <template v-for="(item, index) in crtGroupParams" :key="index">
              <el-form ref="itemFormRef" :model="item" :rules="rules">
                <ul class="fx f12 dataList">
                  <li class="b h40 ifx ac bb pl12" style="width: 5%;min-width: 70px;">
                    <el-form-item label="" prop="isEditable" class="w91">
                      <el-input maxlength="32" :disabled="!item.isEditable" v-model="item.orderBy" placeholder="序号"
                        clearable />
                    </el-form-item>
                  </li>
                  <li class="b h40 ifx ac bb pl12" style="width: 18%;">
                    <el-form-item label="" prop="name" class="w91">
                      <el-input maxlength="32" :disabled="!item.isEditable" v-model="item.name" placeholder="请输入参数名"
                        clearable />
                    </el-form-item>
                  </li>

                  <li class=" h40 ifx ac bb pl12" style="width: 14%;">
                    <el-form-item label="" prop="paramKey" class="w91">
                      <el-input @input="item.paramKey = item.paramKey.replace(/^\d|[\u4e00-\u9fa5]/gi, '')" maxlength="32"
                        :disabled="!item.isEditable" v-model="item.paramKey" placeholder="请输入参数key值" clearable />
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" prop="type" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.type" placeholder="请选择参数结构" clearable
                        class="w100">
                        <el-option label="value" :value="0" />
                        <el-option label="valueList" :value="1" />
                        <el-option label="valueMap" :value="2" />
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" prop="dataType" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.dataType" placeholder="请选择参数类型" clearable
                        class="w100">
                        <el-option label="数字" :value="0" />
                        <el-option label="字符串" :value="1" />
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 8%;min-width: 82px;">
                    <el-form-item label="" prop="dataType" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.zero" placeholder="请选择参数类型" clearable
                        class="w100">
                        <el-option label="可为0" :value="0" />
                        <el-option label="非0" :value="1" />
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" class="w91" prop="dataMaxLength">
                      <el-input v-number-input="{ textType: 'num' }" maxlength="10" :disabled="!item.isEditable"
                        v-model="item.dataMaxLength" placeholder="请输入参数最大长度" clearable />
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">

                    <el-form-item label="" v-if="item.type == 0" class="w91" prop="value">
                      <el-input :disabled="!item.isEditable" v-model="item.value" maxlength="128" placeholder="请输入内容"
                        clearable />
                    </el-form-item>

                    <el-form-item label="" v-else-if="item.type == 1" class="w91" prop="valueList">
                      <el-input :disabled="!item.isEditable" v-model="item.valueList" maxlength="128" placeholder="请输入内容"
                        clearable />
                    </el-form-item>

                    <el-form-item label="" v-else-if="item.type == 2" class="w91" prop="valueMap">
                      <el-input :disabled="!item.isEditable" v-model="item.valueMap" maxlength="128" placeholder="请输入内容"
                        clearable />
                    </el-form-item>

                  </li>

                  <li class=" h40 ifx ac bb pl12 " style="width: 10%;">
                    <template v-if="!item.isEditable">
                      <el-button type="success" @click="handleEdit(index)">编辑</el-button>
                      <el-button type="danger" @click="handleDeleteGroup(index)">删除</el-button>
                    </template>
                    <el-button v-else type="success" @click="handleEditParams(index)">保存</el-button>
                  </li>
                </ul>
              </el-form>
            </template>
            <!-- 新增参数开始 -->
            <template v-for="(item, index) in newGroupParams" v-index="index">
              <el-form ref="newGroupParamsFormRef" :model="item" :rules="rules">
                <ul class="fx f12 dataList">
                  <li class="b h40 ifx ac bb pl12" style="width: 5%;min-width: 70px;">
                    <el-form-item label="" prop="isEditable" class="w91">
                      <el-input maxlength="32" :disabled="!item.isEditable" v-model="item.orderBy" placeholder="序号"
                        clearable />
                    </el-form-item>
                  </li>
                  <li class="b h40 ifx ac bb pl12" style="width: 18%;">
                    <el-form-item prop="name" label="" class="w91">
                      <el-input maxlength="32" :disabled="!item.isEditable" v-model="item.name" placeholder="请输入参数名"
                        clearable />
                    </el-form-item>
                  </li>

                  <li class=" h40 ifx ac bb pl12" style="width: 14%;">
                    <el-form-item prop="paramKey" label="" class="w91">
                      <el-input @input="item.paramKey = item.paramKey.replace(/^\d|[\u4e00-\u9fa5]/gi, '')" maxlength="32"
                        :disabled="!item.isEditable" v-model="item.paramKey" placeholder="请输入参数key值" clearable />
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" prop="type" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.type" placeholder="请选择参数类型" clearable
                        class="w100">
                        <el-option label="value" :value="0" />
                        <el-option label="valueList" :value="1" />
                        <el-option label="valueMap" :value="2" />
                      </el-select>
                    </el-form-item>
                  </li>

                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" prop="dataType" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.dataType" placeholder="请选择参数类型" clearable
                        class="w100">
                        <el-option label="数字" :value="0" />
                        <el-option label="字符串" :value="1" />
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 8%;min-width: 82px;">
                    <el-form-item label="" prop="dataType" class="w91">
                      <el-select :disabled="!item.isEditable" v-model="item.zero" placeholder="请选择能否为0" clearable
                        class="w100">
                        <el-option label="可为0" :value="0" />
                        <el-option label="非0" :value="1" />
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item label="" prop="dataMaxLength" class="w91">
                      <el-input v-number-input="{ textType: 'num' }" maxlength="10" :disabled="!item.isEditable"
                        v-model="item.dataMaxLength" placeholder="请输入参数最大长度" clearable />
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-form-item class="w91" prop="value" v-if="item.type == 0">
                      <el-input :disabled="!item.isEditable" maxlength="128" v-model="item.value" placeholder="请输入内容"
                        clearable />
                    </el-form-item>
                    <el-form-item label="" prop="valueList" class="w91" v-else-if="item.type == 1">
                      <el-input :disabled="!item.isEditable" maxlength="128" v-model="item.valueList" placeholder="请输入内容"
                        clearable />
                    </el-form-item>
                    <el-form-item label="" prop="valueMap" class="w91" v-else-if="item.type == 2">
                      <el-input :disabled="!item.isEditable" maxlength="128" v-model="item.valueMap" placeholder="请输入内容"
                        clearable />
                    </el-form-item>
                  </li>
                  <li class=" h40 ifx ac bb pl12" style="width: 10%;">
                    <el-button type="success" @click="handleSaveParams(index)">保存</el-button>
                  </li>
                </ul>
              </el-form>
            </template>
            <!-- 新增参数结束 -->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss">
.operation:before {
  box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, .15);
  height: 100%;
  width: 20px;
  content: '';
  position: relative;
  left: -20px;
}

.operation {
  position: absolute;
  background: #fff;
  right: 0;
  top: auto;
}

.conductionForm .el-form-item__content {
  flex: 0 1 240px;
}

.w329 {
  /* width: 329px !important; */
}

.w228 {
  width: 228px !important;
  flex-shrink: 0;
}

.w100 {
  width: 100% !important;
}

h5 {
  color: #323639;
}

.parameterSetting {
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 27px;
  min-width: 970px;

  .el-form--inline .el-form-item {
    width: 100%;
  }

  .wp {
    /*  width: 1200px; */
    margin: 0 auto;
    margin-left: 0;
  }

  .dataList {

    margin-top: 20px;

    li {
      box-sizing: border-box;
      min-height: 40px;
    }

    .el-form-item--default {
      margin: 0;
      padding: 0;
    }
  }

  .paramsRow>div {
    margin-right: 20px;
  }

  .lst li {
    background-color: #F2F6FC;
  }

  .w91 {
    width: 91%;
  }

  .el-input {
    height: 40px;
  }

  .el-form-item__label {
    height: 40px;
    line-height: 40px;
    justify-content: flex-start;
  }

  .el-tabs__nav-wrap::after {
    visibility: hidden;
  }

  .el-tabs__item {
    padding: 0;
    width: 200px;
  }

  .tabspg .el-input {
    width: 229px;
    height: 40px;
  }

  .modelBox {
    width: 100%;
    background-color: #8C8CA9;
    height: 451.89px;
  }

  .subTitle {
    font-size: 16px;
    color: rgba(40, 45, 48, 1);
  }

  th:first-child,
  td:first-child {
    background-color: #F6F9FE;
  }
}

.startbtn,
.startbtn:active,
.startbtn:focus {
  width: 120px;
  height: 40px;
  opacity: 1;
  font-size: 14px;
  border-radius: 5px;
  color: #fff;
  background: rgba(0, 84, 254, 1);
}

.startbtn:hover {
  background-color: #3176FC;
}

h5 {
  font-size: 16px;
  font-weight: 400;
}

.dropdown {
  width: 228px;
  height: 220px;
  display: inline-block;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  padding: 14px;
  left: 90px;
  top: 50px;
  z-index: 10;
  background-color: #fff;
}

.gree {
  width: 90px !important;
  height: 32px !important;
}
</style>
<script setup>
import { reactive, ref, onMounted, computed, watch } from 'vue'
import plusBtn from '@/components/plusBtn/Index.vue'
import { listGroup } from '../api/group'
import { getAppList, getAppModuleListByAppId } from '../api/simulate'
import { selectAppParamTree, deleteParam, editParam, addParam } from '../api/setting'
import { ElMessage, ElMessageBox } from 'element-plus'

//分组参数数据列表
const paramTree = ref([])
//获取设置参数列表
function getAppParamTree() {
  selectAppParamTree(form.simulateModule==14?5:1, form.simulateModule).then((res) => {
    paramTree.value = res.data
  })
}
//当前组的参数
const crtGroupParams = computed(() => {
  let data = []
  paramTree.value.map((item, index) => {
    if (item.id == crtGroupId.value) {
      data = item.appParams
    }
  })
  data.map((item, index) => {
    item.isEditable = false
  })
  return data
})
//点击编辑分组按钮
function handleEdit(index) {

  crtGroupParams.value[index].isEditable = true
}
//删除分组
function handleDeleteGroup(index) {
  ElMessageBox.confirm(
    '你是否确定删除本项参数',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      deleteParam(crtGroupParams.value[index].id).then((res) => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getAppParamTree()

      })
    })

}
//分组信息列表
const groupData = ref([])
//查询分组
function getGroupList() {
  listGroup(form.simulateModule==14?5:1, form.simulateModule).then((res) => {
    res.data.map((item) => {
      item.isEditable = false
    })
    groupData.value = res.data
    if (groupData.value.length > 0) {
      localStorage.crtGroupId = groupData.value[0].id
      crtGroupId.value = groupData.value[0].id
    } else {
      crtGroupId.value = ''
    }
    // }
    getAppParamTree()
  })
}
//当前选中的分组
const crtGroupId = ref({})

//切换分组
function handleCrtGroupIdChange(val) {
  newGroupParams.value = []//切换分组的时候清空对象
  localStorage.crtGroupId = val
}


const appList = ref([]);//软件列表
//获取仿真软件列表
function getRemoteAppList() {
  form.simulator = '1'
  getAppModules()
  
}
const modules = ref([]);//仿真模块
//获取仿真模块
function getAppModules() {
  getAppModuleListByAppId(form.simulator).then((res) => {
    modules.value = res.data
    form.simulateModule = res.data[0].id
  })
}
//添加参数
const newGroupParams = ref([])
function hangdleAddParam() {

  newGroupParams.value.push({
    "isEditable": true,
    //"createBy": "",
    // "createTime": "",
    "id": "",
    "paramKey": "",
    "name": "",
    "nextId": null,
    "paramGroupId": "",
    "type": 0,
    "zero": 0,
    //"updateBy": "",
    //"updateTime": "",
    "value": null,
    "valueList": null,
    "valueMap": null,
  })
}

const itemFormRef = ref()//编辑参数表单对象

let rules = {
  name: { required: true, message: '参数名称不能为空', trigger: 'blur' },
  paramKey: { required: true, message: '参数的key不能为空', trigger: 'blur' },
  value: { required: true, message: '参数的默认值不能为空', trigger: 'blur' },
  zero: { required: true, message: '请选择参数能否为0', trigger: 'blur' },
  valueList: { required: true, message: '参数的默认值不能为空', trigger: 'blur' },
  valueMap: { required: true, message: '参数的默认值不能为空', trigger: 'blur' },
  dataMaxLength: { required: true, message: '参数的最大长度不能为空', trigger: 'blur' },
}
//发送添加参数请求
function handleSaveParams(index) {
  newGroupParams.value[index].paramGroupId = crtGroupId.value
  addParam(newGroupParams.value[index]).then((res) => {
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    newGroupParams.value = []
    getAppParamTree()
  })
}

//发送添加参数请求
function handleEditParams(index) {
  itemFormRef.value.map(async (fItem, fIndex) => {
    if (index == fIndex) {
      await fItem.validate((valid, fields) => {
        if (valid) {
          editParam(crtGroupParams.value[index]).then((res) => {
            ElMessage({
              message: '编辑成功',
              type: 'success',
            })
            getAppParamTree()
          })
        } else {
          console.log('groupItemsRef error submit!')
        }
      })
    }
  })
}
//仿真软件表单
const form = reactive({
  taskName: '',
  modelPath: '',
  simulator: '',
  simulateModule: '',
})
watch(form, (n, o) => {
  newGroupParams.value = []//切换表单参数时清空新增参数表单
  if (form.simulator && form.simulateModule) {
    getGroupList()
  }
}, {
  deep: true,
  immediate: false
})
const inputDropDown = ref(false)
onMounted(() => {
  getRemoteAppList()
})
</script>